<template>
  <div style="width: 100%; height: 100%">
    <div
      class="echarts"
      id="piechartis"
      ref="chartReflist"
      style="width: 100%; height: 100%"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GraphicComponent, // 引入 GraphicComponent
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type { PieSeriesOption } from "echarts/charts";
import type {
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
  GraphicComponentOption, // 引入 GraphicComponentOption 类型
} from "echarts/components";
import type { ComposeOption } from "echarts/core";

type ECOption = ComposeOption<
  | PieSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | ToolboxComponentOption
  | GraphicComponentOption
>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  GraphicComponent, // 注册 GraphicComponent
]);

const chartReflist = ref<HTMLElement | null>(null);
const handleTextClick = () => {
  // console.log("点击了底部的文字");
  // 在这里添加你想要的点击事件逻辑
};
const props = defineProps<{
  Cfinish: [];
}>();
onMounted(() => {
  if (chartReflist.value) {
    const chart = echarts.init(chartReflist.value);

    const optionpie = {
      tooltip: {
        trigger: "item",
      },
      grid: {},

      title: [
        {
          text: "课程完成情况",
          left: 10,
          //   top: 10,
          textAlign: "left",
        },
        {
          subtext: "",
          right: 60,
          //   top: 10,
          subtextStyle: {
            textAlign: "right",
          },
        },
      ],
      legend: {
        orient: "vertical", // 设置图例垂直排列
        left: "70%", // 将图例放置在图表右侧
        top: "20%",
        itemWidth: 10, // 调整图例图标宽度
        itemHeight: 10, // 调整图例图标高度，宽高一致以保证是圆形
        // itemGap: 10, // 调整图例项之间的间距
        icon: "circle", // 设置图例图标为圆形
      },
      //   radius: '50%',

      color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
      series: [
        {
          name: "课程完成情况",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["40%", "50%"], // 调整饼图的中心位置，这里向左偏移
          // padAngle: 1,
         
          avoidLabelOverlap: false,
          itemStyle: { //饼图之间间距
              borderColor: "#fff",
              borderWidth: 1.2,
            },
          label: {
            show: true,
            // position: "center",
            // position: "center",
            position: "inside",
          
            textStyle: {
              color: "white", // 设置标签字体颜色为白色
              fontSize: 12, // 设置标签字体大小为 12px
              fontWeight: "bold", // 设置标签字体加粗
            },
            // params.name + ": " +
            formatter: function (params: any) {
              return params.percent + "%";
            },
          },
          //   label:[

          //   ],
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: "bold",
            },
          },
          labelLine: {
            // show: false,yy
            show: true, // 显示标签
            formatter: "{d}%", // 显示百分比
          },
          data: props.Cfinish,
        },
      ],
      graphic: [
        {
          type: "text",
          //   left: "right",
          bottom: 30,
          right: 80,
          style: {
            // 查看详细学习记录
            text: "",
            fill: "#03305C",
            // font-weight: 400
            // fontSize: "1vw",
            // color: #03305C
          },
          invisible: false,
          draggable: false,
          origin: [0, 0],
          bounding: "raw",
        },
      ],
    };
    const chartDom = document.getElementById("piechartis");
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption(optionpie);
      // 监听窗口大小变化事件
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
    chart.setOption(optionpie);
    chart.on("click", (params) => {
      
      if (params.componentType === "graphic") {
        handleTextClick();
      }
    });
  }
});
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
